<template>
  <div class="wrapper">
    <div class="top">
      <div class="form">
        <el-form ref="form" :model="form" :rules="rule" label-width="auto" :inline="true" size="mini">
          <el-form-item prop="orderNum" label="订单号：">
            <el-input v-model="form.orderNum" clearable></el-input>
          </el-form-item>

          <el-form-item prop="orderStatue" label="订单状态：">
            <!-- <el-input v-model="form.orderStatue" clearable></el-input> -->
            <el-select clearable v-model="form.orderStatue">
              <el-option v-for="(item, index) in statusList" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"> </el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="start" label="下单时间：">
            <el-date-picker v-model="form.start" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item prop="end" label-width="3em" label="——">
            <el-date-picker v-model="form.end" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" size="mini" @click="searchList">查 询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="btn">
        <el-button plain size="mini" type="success" @click="dispatchOrder">指派订单</el-button>
      </div>
      <div class="name">订单信息列表</div>
      <div class="table" ref="inner">
        <el-table
          :data="tableData"
          border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-click="rowClick"
          @row-dblclick="dbrowClick"
        >
          <el-table-column :index="indexMethod" type="index" align="center" label=" " width="50"></el-table-column>
          <el-table-column align="left" prop="attCode" label="订单号" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column align="center" prop="attStatusName" label="订单状态" show-overflow-tooltip width="180"></el-table-column>
          <el-table-column align="center" prop="attCreatetime" label="下单时间" show-overflow-tooltip width="180"></el-table-column>
          <el-table-column align="left" prop="adcConsigner" label="客户名称" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column align="left" prop="adcLinkperson" label="联系人" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column align="left" prop="adcLinkphone" label="联系电话" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column align="left" prop="adcSAddress" label="起始地" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column align="left" prop="adcDAddress" label="目的地" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column align="left" prop="gdsName" label="货物名称" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column align="right" prop="gdsWeight" label="订单总质量(T)" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column align="right" prop="rmbamount" label="订单金额(RMB)" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column align="left" prop="attAuditor" label="审核人" show-overflow-tooltip width="160"></el-table-column>
          <el-table-column align="center" prop="attAudittime" label="审核时间" show-overflow-tooltip width="180"></el-table-column>
          <el-table-column align="left" prop="attAuditdiffering" label="审核拒绝原因" show-overflow-tooltip width="180"></el-table-column>
          <el-table-column align="left" prop="attRemark" label="备注" show-overflow-tooltip width="180"></el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <el-pagination
          ref="pagination"
          small
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="Pagination.currentPage"
          :page-sizes="Pagination.pageSizeList"
          :page-size="Pagination.pageSize"
          :layout="Pagination.layout"
          :total="Pagination.total"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="name" width="80%" :visible.sync="openDialog" v-if="openDialog" v-el-drag-dialog :before-close="close" :close-on-click-modal="false">
      <div class="content">
        <div class="box">
          <div class="name">基础信息</div>
          <el-form :model="basicForm" :rules="basicRule" size="mini" ref="basicForm" label-width="auto">
            <el-row>
              <el-col :span="8">
                <el-form-item label="客户：" prop="attCltId">
                  <el-select v-model="basicForm.attCltId" disabled style="width: 100%" @change="getName">
                    <el-option v-for="(item, index) in customer" :key="index" :value="item.cltId" :label="item.cltName"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="委托人：" prop="adcConsigner">
                  <el-input v-model="basicForm.adcConsigner" disabled maxlength="32"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="联系人：" prop="adcLinkperson">
                  <el-input v-model="basicForm.adcLinkperson" disabled maxlength="32"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="联系电话：" prop="adcLinkphone">
                  <el-input v-model="basicForm.adcLinkphone" disabled maxlength="16"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机：" prop="adcTel">
                  <el-input v-model="basicForm.adcTel" disabled maxlength="11"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="Email：" prop="adcEmail">
                  <el-input v-model="basicForm.adcEmail" disabled maxlength="32"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="QQ：" prop="adcQq">
                  <el-input v-model="basicForm.adcQq" disabled maxlength="32"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="微信：" prop="adcWechat">
                  <el-input v-model="basicForm.adcWechat" disabled maxlength="32"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="客户要求作业时间：" prop="attWrkdate">
                  <el-date-picker v-model="basicForm.attWrkdate" value-format="yyyy-MM-dd" disabled> </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户要求作业完成时间：" prop="attFinwrkdate">
                  <el-date-picker v-model="basicForm.attFinwrkdate" value-format="yyyy-MM-dd" disabled> </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车型要求：" prop="adcVehicleRequirements">
                  <el-select v-model="basicForm.adcVehicleRequirements" disabled style="width: 100%">
                    <el-option v-for="(item, index) in carType" :key="index" :label="item.rvCmeaning" :value="item.rvLowValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="卸车费支付方：" prop="adcXcfzff">
                  <el-select v-model="basicForm.adcXcfzff" disabled style="width: 100%">
                    <el-option v-for="(item, index) in payer" :key="index" :label="item.rvCmeaning" :value="item.rvLowValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单结算方式：" prop="adcJsfhValue">
                  <el-select v-model="basicForm.adcJsfh" style="width: 48%" disabled @change="getPay">
                    <el-option v-for="(item, index) in payWay" :key="index" :label="item.rvCmeaning" :value="item.rvLowValue"></el-option>
                  </el-select>
                  <el-select v-model="basicForm.adcJsfhValue" style="width: 48%; margin-left: 4%" disabled>
                    <el-option v-for="(item, index) in payTime" :key="index" :label="item.rvCmeaning" :value="item.rvLowValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="车长要求：" prop="trkLong">
                  <el-select v-model="basicForm.trkLong" disabled style="width: 100%">
                    <el-option v-for="(item, index) in carLong" :key="index" :label="item.rvCmeaning" :value="item.rvLowValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="concate">
          <div class="send box">
            <div class="name">发货方信息</div>
            <concate-form :cltId="basicForm.attCltId" :compForm="sendForm" :desc="true" :view="view" ref="sendForm"></concate-form>
          </div>
          <div class="box accept">
            <div class="name">收货方信息</div>
            <concate-form :cltId="basicForm.attCltId" :compForm="acceptForm" :desc="false" :view="view" ref="acceptForm"></concate-form>
          </div>
        </div>
        <div class="box">
          <div class="name">获取里程</div>
          <el-form :model="distanceForm" :rules="distanceRule" size="mini" ref="distanceForm" label-width="auto">
            <el-row>
              <el-col :span="8">
                <el-form-item label="里程：" prop="adcDistanced">
                  <el-input v-model="distanceForm.adcDistanced" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="时间：" prop="adcDistancedtime">
                  <el-input v-model="distanceForm.adcDistancedtime" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="box">
          <div class="name">货物信息</div>
          <el-form :model="goodsForm[0]" size="mini" :rules="goodsRule" ref="goodsForm">
            <el-table :data="goodsForm" border height="150px" :header-cell-style="{ textAlign: 'center' }" highlight-current-row>
              <el-table-column type="index" align="center" label=" " width="50"></el-table-column>
              <el-table-column align="center" prop="gdsType" label="货物类型" show-overflow-tooltip width="">
                <template slot-scope="scope">
                  <el-form-item prop="gdsType">
                    <el-select style="width: 100%" v-model="scope.row.gdsType" disabled>
                      <el-option v-for="(item, index) in goods" :key="index" :value="item.rvLowValue" :label="item.rvCmeaning"></el-option>
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="left" prop="gdsName" label="货名" show-overflow-tooltip width="">
                <template slot-scope="scope">
                  <el-form-item prop="gdsName">
                    <el-input v-model="scope.row.gdsName" disabled></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="left" prop="gdsQuantity" label="件数" show-overflow-tooltip width="140">
                <template slot-scope="scope">
                  <el-form-item prop="gdsQuantity">
                    <el-input v-model="scope.row.gdsQuantity" disabled></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="left" prop="gdsWeight" label="重量(t)" show-overflow-tooltip width="">
                <template slot-scope="scope">
                  <el-form-item prop="gdsWeight">
                    <el-input v-model="scope.row.gdsWeight" disabled></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="left" prop="gdsVolumn" label="体积(m³)" show-overflow-tooltip width="">
                <template slot-scope="scope">
                  <el-form-item prop="gdsVolumn">
                    <el-input v-model="scope.row.gdsVolumn" disabled></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="left" prop="gdsPrice" label="吨/元" show-overflow-tooltip width="">
                <template slot-scope="scope">
                  <el-form-item prop="gdsPrice">
                    <el-input v-model="scope.row.gdsPrice" disabled></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column align="left" prop="gdsRemark" label="备注" show-overflow-tooltip width="130">
                <template slot-scope="scope">
                  <el-form-item prop="gdsRemark">
                    <el-input v-model="scope.row.gdsRemark" disabled></el-input>
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </div>
      <div class="box" v-if="!see">
        <div class="name">车辆信息</div>
        <el-table :data="carInfo" border height="150px" highlight-current-row @current-change="changeCurrentCar" :header-cell-style="{ textAlign: 'center' }">
          <el-table-column prop="valid" align="center" label=" " width="50">
            <template slot-scope="scope">
              <el-checkbox disabled v-model="scope.row.valid" true-label="Y" false-label="N"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="zx" label="在线" show-overflow-tooltip width="120"> </el-table-column>
          <el-table-column align="left" prop="cph" label="车牌号" show-overflow-tooltip width=""> </el-table-column>
          <el-table-column align="left" prop="cx" label="车型" show-overflow-tooltip width=""> </el-table-column>
          <el-table-column align="right" prop="zzt" label="载重吨(T)" show-overflow-tooltip width=""> </el-table-column>
          <el-table-column align="left" prop="sj" label="司机" show-overflow-tooltip width=""> </el-table-column>
          <el-table-column align="left" prop="lxdh" label="联系电话" show-overflow-tooltip width=""> </el-table-column>
          <el-table-column align="center" prop="sxsj" label="上线时间" show-overflow-tooltip width=""> </el-table-column>
          <el-table-column align="center" prop="zt" label="状态" show-overflow-tooltip width="130"> </el-table-column>
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save" v-if="!see" size="mini">派车</el-button>
        <el-button @click="close" size="mini">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination'
import resizeMixin from '@/mixins/resize'
import concateForm from '../internalOrder/concate'
import { getNowTime } from '@/utils/utils'
import { orderInfo, getRefCodesByType, getTmAttendanceList } from '@/request/api'
import { sendOrder } from '../../../request/internal/sendorder'

export default {
  mixins: [paginationMixin, resizeMixin],
  components: { concateForm },
  data() {
    return {
      form: {
        orderNum: '',
        orderStatue: '',
        orderTime: '',
      },
      rule: {
        orderNum: [],
        orderStatue: [],
        orderTime: [],
      },
      statusList: [], //状态值
      maxHeight: -1,
      tableData: [],
      currentData: null, //单击选中数据
      viewData: {}, //双击选中数据

      //对话框----新增修改
      name: '指派订单',
      openDialog: false,
      edit: false, //编辑
      see: false, //查看
      check: true, //审核
      customer: [], //客户
      carType: [], //车型
      payer: [], //卸车支付
      payWay: [], //结算方式
      payTime: [], //结算方式
      carLong: [], //车长
      distanceForm: {}, //里程信息
      distanceRule: {
        distance: [{ required: true, message: '请输入里程', trigger: 'blur' }],
        time: [{ required: true, message: '请输入时间', trigger: 'blur' }],
      },
      basicForm: {}, //基础信息
      basicRule: {
        khmc: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
        wtr: [{ required: true, message: '请输入委托人', trigger: 'blur' }],
        lxr: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        lxdh: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        sj: [{ required: true, message: '请输入司机名称', trigger: 'blur' }],
        email: [{ required: true, message: '请输入Email地址', trigger: 'blur' }],
        qq: [{ required: false, message: '请输入QQ', trigger: 'blur' }],
        wx: [{ required: false, message: '请输入微信', trigger: 'blur' }],
        khtqzysj: [{ required: true, message: '请输入客户要求作业时间', trigger: 'blur' }],
        khyqzywcsj: [{ required: true, message: '请输入客户要求作业完成时间', trigger: 'blur' }],
        cxyq: [{ required: true, message: '请输入车型要求', trigger: 'blur' }],
        xcfzff: [{ required: true, message: '请输入卸车支付方', trigger: 'blur' }],
        ddjsfs: [{ required: true, message: '请输入订单结算方式', trigger: 'blur' }],
        ccyq: [{ required: true, message: '请输入车长要求', trigger: 'blur' }],
      },
      sendForm: {}, //发货信息
      acceptForm: {}, //收货信息
      concateRule: {},
      goodsForm: [
        {
          hwlx: 'mc',
          hm: '货名',
          js: '件数',
          zl: '重量',
          tj: '体积',
          dw: '单位',
          bz: '备注',
        },
      ], //货物信息
      goodsRule: {},
      //车辆信息
      carInfo: [],
      view: '1',
    }
  },
  created() {
    this.resize = () => {
      this.maxHeight = this.$refs.inner.offsetHeight
    }
    //订单状态
    getRefCodesByType('网络平台订单状态').then((res) => {
      if (res.success === '1') {
        this.statusList = res.data.FTKJWLHYPT
      }
    })
    this.refreshList()
  },
  watch: {
    basicForm: {
      handler() {
        this.getPay(this.basicForm.adcJsfh)
      },
    },
  },
  methods: {
    save() {
      const car = this.carInfo.find((item) => item.valid !== 'N')
      if (!car) {
        this.$alert('请选择指派车辆！', '提示', {
          confirmButtonText: '确定',
        })
        return
      }
      sendOrder({
        uuid: this.currentData.uuid,
        wdcId: car.uuid,
      }).then(() => {
        this.$message.success('指派车辆成功！')
        this.openDialog = false
        this.currentData = null
        this.refreshList()
      })
    },
    //重写getList
    getList(currentPage, pageSize, updateTotal) {
      orderInfo({
        attCode: this.form.orderNum,
        attStatus: this.form.orderStatue,
        attCreatetimeStart: this.form.start,
        attCreatetimeEnd: this.form.end,
        PageIndexs: this.Pagination.currentPage.toString(),
        PageSizes: this.Pagination.pageSize.toString(),
      }).then((response) => {
        this.tableData = response.data.FTKJWLHYPT
        updateTotal(Number(response.data.total.FTKJWLHYPT))
      })
    },
    //获取结算类型
    getPay(name) {
      // this.basicForm.adcJsfhValue=''
      this.payTime = []
      getRefCodesByType(name).then((res) => {
        if (res.success === '1') {
          this.payTime = res.data.FTKJWLHYPT
        }
      })
    },
    changeCurrentCar(currentRow, oldCurrentRow) {
      currentRow.valid = 'Y'
      oldCurrentRow && (oldCurrentRow.valid = 'N')
    },
    rowClick(row) {
      this.currentData = Object.assign({}, row)
      this.basicForm = this.currentData
    },
    dbrowClick(row) {
      this.currentData = Object.assign({}, row)
      this.basicForm = this.currentData
      //收货
      this.acceptForm = {
        orReveivingparty: this.currentData.orReveivingparty,
        lxr: this.currentData.orReveivingpartycontacts,
        lxdh: this.currentData.orReveivingpartytel,
        adcDSfinwrkdate: this.currentData.adcDSfinwrkdate,
        adcDEfinwrkdate: this.currentData.adcDEfinwrkdate,
        province: this.currentData.odcDProvince,
        city: this.currentData.orReveivingpartytelcity,
        district: this.currentData.odcDArea,
        xxdz: this.currentData.adcDAddress,
        jd: this.currentData.adcDX,
        wd: this.currentData.adcDY,
      }
      //发货
      this.sendForm = {
        orShipper: this.currentData.orShipper,
        lxr: this.currentData.orShippercontacts,
        lxdh: this.currentData.orShippertel,
        adcSSwrkdate: this.currentData.adcSSwrkdate,
        adcSEwrkdate: this.currentData.adcSEwrkdate,
        province: this.currentData.odcSProvince,
        city: this.currentData.orDeliverypointcity,
        district: this.currentData.odcSArea,
        xxdz: this.currentData.adcSAddress,
        jd: this.currentData.adcSX,
        wd: this.currentData.adcSY,
      }
      this.distanceForm = this.currentData
      this.goodsForm[0] = this.currentData
      this.auditForm = {}
      this.see = true
      this.name = '查看订单'
      this.openDialog = true
    },

    //关闭对话框
    close() {
      this.openDialog = false
      this.currentData = null
      this.refreshList()
    },
    //派单
    dispatchOrder() {
      if (!this.currentData || Object.keys(this.currentData).length === 0) {
        this.$alert('每次只能发布一行数据，你已选择0行', '提示', {
          confirmButtonText: '确定',
        })
        return
      }

      if (!['YSH'].includes(this.currentData.attStatus)) {
        this.$alert('已审核的订单才能指派,此订单不能指派！', '提示', {
          confirmButtonText: '确定',
        })
        return
      }
      //收货
      this.acceptForm = {
        orReveivingparty: this.currentData.orReveivingparty,
        lxr: this.currentData.orReveivingpartycontacts,
        lxdh: this.currentData.orReveivingpartytel,
        adcDSfinwrkdate: this.currentData.adcDSfinwrkdate,
        adcDEfinwrkdate: this.currentData.adcDEfinwrkdate,
        province: this.currentData.odcDProvince,
        city: this.currentData.orReveivingpartytelcity,
        district: this.currentData.odcDArea,
        xxdz: this.currentData.adcDAddress,
        jd: this.currentData.adcDX,
        wd: this.currentData.adcDY,
      }
      //发货
      this.sendForm = {
        orShipper: this.currentData.orShipper,
        lxr: this.currentData.orShippercontacts,
        lxdh: this.currentData.orShippertel,
        adcSSwrkdate: this.currentData.adcSSwrkdate,
        adcSEwrkdate: this.currentData.adcSEwrkdate,
        province: this.currentData.odcSProvince,
        city: this.currentData.orDeliverypointcity,
        district: this.currentData.odcSArea,
        xxdz: this.currentData.adcSAddress,
        jd: this.currentData.adcSX,
        wd: this.currentData.adcSY,
      }
      this.distanceForm = this.currentData
      this.goodsForm[0] = this.currentData
      this.auditForm = {}
      this.see = false
      this.name = '指派订单'
      this.getCars()
      this.openDialog = true
    },
    getCars() {
      getTmAttendanceList({
        wdcTime: getNowTime().split(' ')[0],
      }).then((res) => {
        this.carInfo = res.data.FTKJWLHYPT.map((item) => {
          return {
            uuid: item.wdcId,
            valid: 'N',
            zx: item.wdcStatus === 'Y' ? '在线' : '不在线',
            cph: item.trkNo,
            cx: item.trkTypeName,
            zzt: '333',
            sj: item.dvrName,
            lxdh: '111111111',
            sxsj: item.wdcStatus === 'Y' ? '时间未给出' : '',
            zt: item.wztzStatus ? '运输中' : '空闲',
          }
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
  padding: 12px 15px;
  .concate {
    display: flex;
    justify-content: space-between;
    // padding:10px 0;
    .send {
      width: 49%;
    }
    .accept {
      width: 49%;
    }
  }
  .box {
    padding: 12px;
    position: relative;
    border: 1px solid rgb(29, 158, 233);
    border-radius: 5px;
    // height:300px;
    margin-bottom: 20px;
    .name {
      position: absolute;
      top: -20px;
      font-size: 16px;
      font-weight: 700;
      padding: 10px;
      line-height: 20px;
      background: #fff;
    }
  }
}
.top {
  //  height:500px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .form {
    height: 30px;
  }
  .btn {
    height: 50px;
    line-height: 50px;
  }
  .name {
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }
  .table {
    flex: 1;
  }
  .pages {
    height: 30px;
  }
}
</style>
